<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css" />
		<link rel="stylesheet" type="text/css" href="../css/html.css"/>
		<style type="text/css">
			.main {
				background-color: burlywood;
				overflow: hidden;
				margin: auto;
				margin-top: 0.625em;
			}
			.container{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 0.625em;
			}
			.page{
				background-color: white;
			}
			.shouye{
				padding: 15%;
				height: 100%;
				position:relative;
			}
			.bt{
				width: 100%;	
				text-align: right;		
				font-family: "arial narrow";	
			}
			.xian{
				width: 100%;
				display: flex;
				justify-content: flex-end;
			}
			.fg{
				width: 30%;
				height: 6px;
				background-color: #000000;
			}
			.main-content{
				width: 100%;
				height: 60%;
				font-size: 12px;
			}
			.footpage{
				position: absolute;
				right:15%;
				bottom: 10%;
			}
			.flipbook>div{
				width: 100%;
				height: 100%;
			}
		</style>
		<title></title>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title hbg">书籍</h1>
		</header>
		<div class="mui-content">
			<div class="flipbook-viewport">
			<div class="container">
				<div class="flipbook">
				</div>
			</div>
		</div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/modernizr.2.5.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			let w1 = document.body.clientWidth - 20;
			
			var flipbook = $('.flipbook');
			var pagestr = 1,bid= 0,fid = 0;
			
			//自己pdf的路径，从后台获取的还没测试
			window.onload = function(){
				let str = getrequest();
				bid = str.id;
				console.log(bid);
				//var url = 'http://ws.rovine.cn/book/6564d11f5811dd03fad5c6324982a5fc.pdf';
				//let url = "xinfu.pdf";
				//getpdf(url);
				mui.plusReady(function(){
					let view = plus.webview.currentWebview();
					bid = view.bid;
				})
				//getbook_cover_info();
				getcover();
				
				
				
			}
			function getcover(){
				let data = {
					url:"/api/Book/book_cover_list",
					data:{
						access_token:acctoken(),
						bid:bid,
						page:pagestr,
					}
				}
				ajaxnohide(data,function(res){
					console.log("获取书本内容",res);
					//getbooks();
					let data = {
					url:"/api/Book/book_cover_info",
					data:{
						access_token:acctoken(),
						bid:bid,
						}
					}
					
						ajaxnohide(data,function(res){
							console.log("获取书本bid",res)
						fid = res.data[0].id;
						var bookurl = "http://ws.rovine.cn/api/Pdf/preview_book/bid/"+bid+"/id/"+fid;
						console.log("封面路径",bookurl);
							getpdf(bookurl);
						
					})
					
					
				})
			}
			
			function getbook_cover_info(){
				let data = {
					url:"/api/Book/book_cover_info",
					data:{
						access_token:acctoken(),
						bid:bid,
					}
				}
				ajax(data,function(res){
					console.log(res)
					fid = res.data[0].id;
				})
				
			}
			
			function getbooks(){
				let data = {
					url:"/api/Book/book_article",
					data:{
						access_token:acctoken()||"",
						page:pagestr,
						bid:bid
					}
				}
				
				ajax(data,function(res){
					
					console.log(res);
					
				})
				
				
			}
			
			function getpdf(url){
				//自己项目中worker.js的路径
				mui.showLoading("正在加载..PDF", "div");
						
				pdfjsLib.workerSrc = 'js/pdf.worker.js';
				var loadingTask = pdfjsLib.getDocument(url);
				loadingTask.promise.then(function(pdf) {
					//根据总页数添加固定的div和canvas
					console.log("总页数",pdf.numPages);
					mui.hideLoading();
					for (let i = 1; i <= pdf.numPages;i++) {
						let id = 'canvaspage' + i;
						let div = document.createElement('div');
                        div.innerHTML = '<canvas  id="' + id + '"></canvas>';
						console.log();
						flipbook.append(div);
						setcanvas(i,pdf,id);
					} 
					
					//调用turn
					yepnope({
						test : Modernizr.csstransforms,
						yep: ['lib/turn.min.js'],
						complete: loadApp
					});
					
			 })
							/*mui.hideLoading();
							mui.toast("暂无数据")*/
				
			}
			//将将pdf添加到canvas里面
			function setcanvas(i,pdf,id){
				pdf.getPage(i).then(function(page) {
                        let canvas = document.getElementById(id);
					    let context = canvas.getContext('2d');
						var viewport = page.getViewport(2.0);
						canvas.style.width = w1 + 'px';
						canvas.style.height =  w1*z + 'px';
						canvas.width= viewport.width;
                		canvas.height= viewport.height;
					    let renderContext = {
					      canvasContext: context,
					      viewport: viewport
					    };
					   page.render(renderContext);
				})
			}
			/*
			function setcanvas(i,pdf,id){
				pdf.getPage(i).then(function(page) {
                        let canvas = document.getElementById(id);
					    let context = canvas.getContext('2d');
						var viewport = page.getViewport(1);
						canvas.style.width = w1 + 'px';
						canvas.style.height =  w1*z + 'px';
						canvas.width = 592.28;
						canvas.height = 841.89;
					    let renderContext = {
					      canvasContext: context,
					      viewport: viewport
					    };
					   page.render(renderContext);
				})
			}*/
			//将将pdf添加到canvas里面
			/*function setcanvas(i,pdf,id){
				pdf.getPage(i).then(function(page) {
                        let canvas = document.getElementById(id);
					    let context = canvas.getContext('2d');
						var ratio = getPixelRatio(context);
						//console.log(ratio)
						let scale = 1;
						//592.28 * 841.89;
						var viewport = page.getViewport(scale);
						let h1 = w1*z;
						console.log("w",w1);
						console.log("h1",h1);
						canvas.style.width = w1 + 'px';
						canvas.style.height =  w1*z + 'px';
						//canvas.width = w1 * ratio;
						//canvas.height = w1*z * ratio;
						canvas.width = 592.28;
						canvas.height = 841.89;
						let x = 592.28/w1;
						let y = 841.89/h1;
						console.log(x);
						console.log(y);
					    //context.scale( ratio,ratio);
					   // context.scale(1,1);
					    let renderContext = {
					      canvasContext: context,
					      viewport: viewport
					    };
					   page.render(renderContext);
				})
			}
*/
			//自己写的获取数据的函数  
			function getbooklist(){
				let data = {
					url:"/api/Book/book_article",
					data:{
						access_token : acctoken()||"",
						page:pagestr,
						bid:bid,
					}
				};
				ajax(data,function(res){
					console.log("书本文章列表",res);
					/*if(res.code == -1){
						mui.toast(res.message);
					}*/
				})
			}
			//用于turn.js
			function loadApp() {
				$('.flipbook').turn({
						width:w1,	//翻页视图的宽度
						height:w1*z,//高度
						elevation: 50,
						gradients: true,
						display: 'single',//单页显示
						autoCenter: false
				});
			}
			
			 function getPixelRatio(context) {
					var backingStore = context.backingStorePixelRatio ||
					context.webkitBackingStorePixelRatio ||
					context.mozBackingStorePixelRatio ||
					context.msBackingStorePixelRatio ||
					context.oBackingStorePixelRatio ||
					context.backingStorePixelRatio || 1;
					return (window.devicePixelRatio || 1) / backingStore;
			};
			


			
		
			

		</script>
	</body>

</html>